<div class="layui-card layadmin-header">
    <div class="layui-breadcrumb" lay-filter="breadcrumb">
        <a><cite>用户</cite></a>
        <a><cite>个人资料</cite></a>
    </div>
</div>

<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-header">个人资料</div>
                <div class="layui-card-body">

                    <div class="layui-form" lay-filter="userInfoForm">
                        <div class="layui-form-item">
                            <label class="layui-form-label" style="width: 28px; margin-left: 0px;">专业</label>
                            <div class="layui-input-inline" style="width: 75px; float: left; margin-left: 10px;">
                                <select lay-filter="grade" id="grade" name="grade">
                                </select>
                            </div>
                            <div class="layui-input-inline" style="width: 155px;float: left; margin-left: 10px;">
                                <select lay-filter="specialty" id="specialty" name="specialty">
                                </select>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label" style="width: 28px; margin-left: 0px;">学号</label>
                            <div class="layui-input-inline" style="float: left; margin-left: 10px;">
                                <input type="text" readonly disabled id="userCode" name="userCode" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label" style="width: 28px; margin-left: 0px;">姓名</label>
                            <div class="layui-input-inline" style="float: left; margin-left: 10px;">
                                <input type="text" id="userName" name="userName" class="layui-input" lay-verify="required" placeholder="必填">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label" style="width: 28px; margin-left: 0px;">邮箱</label>
                            <div class="layui-input-inline" style="float: left; margin-left: 10px;">
                                <input type="text" id="email" name="email" class="layui-input" lay-verify="required|email" placeholder="必填">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label" style="width: 28px; margin-left: 0px;">手机</label>
                            <div class="layui-input-inline" style="float: left; margin-left: 10px;">
                                <input type="text" id="phone" name="phone" class="layui-input" placeholder="选填">
                            </div>
                        </div>

                        <div class="layui-form-item">
                            <label class="layui-form-label" style="width: 28px; margin-left: 0px;"></label>
                            <div class="layui-input-inline" style="float: left; margin-left: 10px;">
                                <button class="layui-btn" lay-submit lay-filter="setUserInfo">保存</button>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>
</div>

<script>
    layui.use(['form'], function () {
        var form = layui.form,
            $ = layui.$;
        var infoURL = "/jw/stu/info";
        var stuGrade, stuSpecialtyCode;
        $.ajax({
            url:        infoURL,
            dataType:   'json',
            complete    :function (result) {
                result = result.responseJSON;
                var status = result.status;
                if (status !== 200){
                    layer.msg("用户资料获取失败");
                    return;
                }
                var data = result.data;
                stuGrade = data['grade'];
                stuSpecialtyCode = data['specialtyCode'];
                form.val("userInfoForm", {
                    "userCode": data['userCode'],
                    "userName": data['userName'],
                    "email": data['email'],
                    "phone": data['phone']
                });
                renderGrade(data['grade']);
                renderSpecialty(data['grade']);
                form.render();
            }
        });

        // 渲染年份
        function renderGrade(grade) {
            grade = parseInt(grade);
            var today = new Date();
            var year = today.getFullYear();
            var startYear = year - 4;
            $('#grade').empty();
            for (var i = year; i >= startYear; i--) {
                if (i === grade) {
                    $('#grade').append("<option value='" + i + "' selected>" + i + "</option>");
                }else {
                    $('#grade').append("<option value='" + i + "'>" + i + "</option>");
                }
            }
        }

        // 渲染专业
        function renderSpecialty(grade) {
            $.ajax({
                url: "/jw/specialty/" + grade,
                dataType: 'JSON',
                complete: function (result) {
                    result = result.responseJSON;
                    if (result['status'] === 200) {
                        // 清空
                        $('#specialty').empty();
                        var list = result.data;
                        var html;
                        for(var specialty in list) {
                            specialty = list[specialty];
                            if (specialty['code'] === stuSpecialtyCode) {
                                html = "<option selected value='" + specialty['code'] + "'>" + specialty['name'] + "</option>"
                            } else  {
                                html = "<option value='" + specialty['code'] + "'>" + specialty['name'] + "</option>"
                            }
                            $('#specialty').append(html);
                        }
                        form.render("select")
                    } else {
                        layer.msg(result['message'])
                    }
                }
            })
        }

        form.on('submit(setUserInfo)', function (data) {
            var userName = data.field.userName.trim();
            if (userName.length < 2 || userName.length > 8) {
                layer.msg("用户名长度为2-8位")
            }else {
                layer.confirm("确认修改", function (index) {
                    var load = layer.load(2);
                    data = JSON.stringify(data.field);
                    $.ajax({
                        url: infoURL,
                        type: 'POST',
                        contentType: 'application/json;charset=utf-8;',
                        dataType: 'JSON',
                        data: data,
                        complete: function (result) {
                            layer.close(load);
                            result = result.responseJSON;
                            if (result['status'] === 200) {
                                layer.msg("保存成功")
                            }else {
                                layer.msg(result['message'])
                            }
                        }
                    });
                    layer.close(index);
                })
            }
        });
    });
</script>